<!-- inline styles related to this page -->
<style type="text/css">
	.ctytab {
		width: 100%;
		height: 100%;
		min-width: 800px;
		min-height: 800px;
	}

	.ctyalet {
		height: 44px;
		border: 1px solid #ccc;
	}

	.ctyad_vip {
		width: 160px;
		height: 40px;
		background: #3abdeb;
		margin-top: 10px;
		font-size: 18px;
		text-align: center;
		line-height: 40px;
		color: #FFFFFF;
		margin-bottom: 10px;
		float: left;
	}

	.ctybg img {
		float: right;
		margin-top: 10px;
		margin-right: 20px;
	}

	.ctyadvip span {
		margin-right: 6px;
	}

	#ctysimple-table {
		width: 100%;
		font-size: 16px;
	}

	#ctysimple-table th {
		height: 40px;
		color: #565b61;
		border: none;
		background: #76d4f6;
	}

	.ctyico {
		margin-left: 40px;
		margin-right: 50px;
	}

	#ctysimple-table td {
		border: none;
		margin-left: 57px;
		color: #595961;
	}

	#ctysimple-table tr {
		border: none;
		background: #FFFFFF;
		margin-left: 57px;
		height: 55px;
	}

	#ctysimple-table .tr td {
		height: 55px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#ctysimple-table .trtow td {
		height: 55px;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#ctysimple-table tr:hover {
		background: #c7f1ff;
	}

	.center .pos-rel {
		margin-left: 27px;
	}

	.ctyxiala {
		padding-left: 20px;
		color: #a9a7b4;
		padding-top: 20px;
		padding-bottom: 10px;
		background: #FFFFFF;
	}

	.table {
		background: #FFFFFF;
	}

	.table> thead> tr> th,
	.table> tbody> tr> td {
		padding-top: 20px!important;
		padding-bottom: 20px !important;
		border: none !important;
		vertical-align: middle;
	}

	.table> thead> tr> th {
		background: #76d4f6;
	}

	.table> tbody> tr> td {
		background: transparent;
	}

	.table> tbody> tr.active> td {
		background: #c7f1ff;
	}

	.table> tbody> tr:hover {
		background: #c7f1ff;
	}

	.table .fa-trash-o {
		font-size: 16px;
	}

	.table th .fa-trash-o {
		color: white;
	}

	.table td .fa-trash-o {
		color: #76d4f6;
		display: none;
	}

	.table td .fa-pencil-square-o {
		font-size: 24px;
		color: #c8c8c8;
	}

	.table tr.active td .fa-trash-o {
		display: block;
	}

	.table tr.active td .fa-pencil-square-o {
		color: #76d4f6;
	}
</style>

<!-- begin -->
<div class="ctytab">

	<div class="ctyadvip">
		<div class="ctyad_vip"><span>+</span>增加店员</div>
		<div class="ctybg">
			<img src="images/img/shezhi.png" />
			<img src="images/img/zhibiao.png" />
		</div>
	</div>
	<table id="simple-table" class="table">
		<thead>
			<tr>
				<th class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</th>
				<th class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</th>
				<th>店员ID</th>
				<th>店员姓名</th>
				<th>性别</th>
				<th>角色</th>
				<th>联系电话</th>
				<th>上次交班时间</th>
				<th>销售额</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="center">
					<label class="pos-rel">
			<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>
					12345678
				</td>
				<td>
					张三
				</td>
				<td>
					<img src="images/img/a1.png" /></td>
				<td>收银员</td>
				<td>12345678</td>
				<td>
					2016-11-17 12:00:00
				</td>
				<td>999999.99</td>
				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
			<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>
					12345678
				</td>

				<td>
					张三
				</td>
				<td><img src="images/img/a1.png" /></td>
				<td>收银员</td>
				<td>12345678</td>

				<td>
					2016-11-17 12:00:00
				</td>
				<td>999999.99</td>

				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
				<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>
			12345678
			</td>

			<td>
				张三
			</td>
			<td><img src="images/img/a1.png"/></td>
			<td>收银员</td>
			<td>12345678</td>

			<td>
			2016-11-17 12:00:00
			</td>
			<td>999999.99</td>

				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
				<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>
			12345678
			</td>

			<td>
				张三
			</td>
			<td><img src="images/img/a1.png"/></td>
			<td>收银员</td>
			<td>12345678</td>

			<td>
			2016-11-17 12:00:00
			</td>
			<td>999999.99</td>

				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
				<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>
			12345678
			</td>

			<td>
				张三
			</td>
			<td><img src="images/img/a1.png"/></td>
			<td>收银员</td>
			<td>12345678</td>

			<td>
			2016-11-17 12:00:00
			</td>
			<td>999999.99</td>

				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
				<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>
			12345678
			</td>

			<td>
				张三
			</td>
			<td><img src="images/img/a1.png"/></td>
			<td>收银员</td>
			<td>12345678</td>

			<td>
			2016-11-17 12:00:00
			</td>
			<td>999999.99</td>

				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
				<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>
			12345678
			</td>

			<td>
				张三
			</td>
			<td><img src="images/img/a1.png"/></td>
			<td>收银员</td>
			<td>12345678</td>

			<td>
			2016-11-17 12:00:00
			</td>
			<td>999999.99</td>

				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
				<tr>
				<td class="center">
					<label class="pos-rel">
						<input type="checkbox" class="ace" />
						<span class="lbl"></span>
					</label>
				</td>
				<td class="center">
					<i class="ace-icon fa fa-trash-o"></i>
				</td>
				<td>
			12345678
			</td>

			<td>
				张三
			</td>
			<td><img src="images/img/a1.png"/></td>
			<td>收银员</td>
			<td>12345678</td>

			<td>
			2016-11-17 12:00:00
			</td>
			<td>999999.99</td>

				<td>
					<i class="ace-icon fa fa-pencil-square-o"></i>
				</td>
			</tr>
		</tbody>
	</table>

	<div class="ctyxiala">
		共三页，每页显示<select><option>10</option><option>20</option><option>50</option><select>
</div>



</div>
<!-- end -->

<!-- inline scripts related to this page -->
<script type="text/javascript">
	jQuery(function($) {
		$('#simple-table').on('click', 'td :checkbox', function() {
			var $row = $(this).closest('tr');
			if(this.checked) $row.addClass('active');
			else $row.removeClass('active');
		}).on('click','th:eq(0) :checkbox', function(){
			var checkall = this.checked;
			$(this).closest('table').find('tbody :checkbox').each(function(){
				this.checked = checkall;
				var $row = $(this).closest('tr');
				if(this.checked) $row.addClass('active');
				else $row.removeClass('active');
			});
		});


			});
</script>